<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        body,div,li,ul,input{margin:0;padding:0;}
        .clear::after{
            clear: both;
            display: block;
            content: '';
        }
        #box1{
        }
        .content{
            width: 100%;
            height: 95%;
            margin-top: 5%;
            background: lightskyblue;
        }
        #one{
             width: 100px;
             height: 50px;
             background: #534533;
        }
        #two{
             width: 200px;
             height: 50px;
             background: #464867;
        }
        #three{
             width: 300px;
             height: 50px;
             background: #123789;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div class="content">
            <ul class="clear">
                <div id="one" width='100'></div>
                <div id="two" width='200'></div>
                <div id="three" width='300px'></div>
                <li>
                    <span>嘻嘻哈哈</span>
                </li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <div id="bottom">
                <div id="left">
                    <div id="right">
                        <input type="text" name="myname" value="" placeholder="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            // id 选择器
            $('#box1').css({'width':'1500px','height':'900px', 'background':'orange','margin':'0 auto', 'border-radius':'20px','box-shadow': '10px 2px 10px 15px #ccc','overflow':'hidden'})

            // tagname 选择器
            $('ul li').css({'font-size':'20px'})
            $('ul>li').css({'cursor':'pointer','margin-right':'20px'})
            $('ul+#bottom').css({'width':'100%','height':'500px','background':'lightyellow'})
            $('#one~li').css({'color':'red'})

            // :first
            $('li:first').css({'color':'orange'})
            $('li:eq(1)').css({'background':'skyblue'})
            $('li:eq(5)').css({'background':'blue'})
            $('li:contains("3")').css({'background':'red','color':'#fff'})
            $('li:has("a")').css({'height':'200px'})
            $('input[name="myname"]').css({'border':'5px solid red'})
            
        })
    </script>
</body>
</html>